<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="style/bootstrap.css">
  <link rel="stylesheet" href="style/form-style.css">
  <link rel="icon" type="image/png" href="style/icon-img.png">
  <title>SEPSIS DISEASE PREDICTION</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- SCRIPTS TO SEND FORM DATA TO NEXT PAGE -->
<script type="text/javascript">
    function WriteStorage() {
        value = document.myform.age.value;
        localStorage.setItem("age", value);

        value = document.myform.gender.value;
        localStorage.setItem("gender", value);

        value = document.myform.HR.value;
        localStorage.setItem("HR", value);

        value = document.myform.O2Sat.value;
        localStorage.setItem("O2Sat", value);

        value = document.myform.Temp.value;
        localStorage.setItem("Temp", value);

        value = document.myform.SBP.value;
        localStorage.setItem("SBP", value);

        value = document.myform.MAP.value;
        localStorage.setItem("MAP", value);

        value = document.myform.DBP.value;
        localStorage.setItem("DBP", value);

        value = document.myform.Resp.value;
        localStorage.setItem("Resp", value);

        value = document.myform.EtCO2.value;
        localStorage.setItem("EtCO2", value);

        value = document.myform.BaseExcess.value;
        localStorage.setItem("BaseExcess", value);

        value = document.myform.HCO3.value;
        localStorage.setItem("HCO3", value);

        value = document.myform.FiO2.value;
        localStorage.setItem("FiO2", value);

        value = document.myform.pH.value;
        localStorage.setItem("pH", value);

        value = document.myform.PaCO2.value;
        localStorage.setItem("PaCO2", value);

        value = document.myform.SaO2.value;
        localStorage.setItem("SaO2", value);

        value = document.myform.AST.value;
        localStorage.setItem("AST", value);

        value = document.myform.BUN.value;
        localStorage.setItem("BUN", value);

        value = document.myform.Alkalinephos.value;
        localStorage.setItem("Alkalinephos", value);

        value = document.myform.Calcium.value;
        localStorage.setItem("Calcium", value);

        value = document.myform.Chloride.value;
        localStorage.setItem("Chloride", value);

        value = document.myform.Creatinine.value;
        localStorage.setItem("Creatinine", value);

        value = document.myform.Bilirubin_direct.value;
        localStorage.setItem("Bilirubin_direct", value);

        value = document.myform.Glucose.value;
        localStorage.setItem("Glucose", value);

        value = document.myform.Lactate.value;
        localStorage.setItem("Lactate", value);

        value = document.myform.Magnesium.value;
        localStorage.setItem("Magnesium", value);

        value = document.myform.Phosphate.value;
        localStorage.setItem("Phosphate", value);

        value = document.myform.Potassium.value;
        localStorage.setItem("Potassium", value);

        value = document.myform.BILIRUBIN.value;
        localStorage.setItem("BILIRUBIN", value);

        value = document.myform.TROPONIN.value;
        localStorage.setItem("TROPONIN", value);

        value = document.myform.Hct.value;
        localStorage.setItem("Hct", value);

        value = document.myform.Hb.value;
        localStorage.setItem("Hb", value);

        value = document.myform.PTT.value;
        localStorage.setItem("PTT", value);

        value = document.myform.WBC.value;
        localStorage.setItem("WBC", value);

        value = document.myform.FIBRINOGEN.value;
        localStorage.setItem("FIBRINOGEN", value);

        value = document.myform.PLATELATE.value;
        localStorage.setItem("PLATELATE", value);

        value = document.myform.Unit1.value;
        localStorage.setItem("Unit1", value);

        value = document.myform.Unit2.value;
        localStorage.setItem("Unit2", value);

        value = document.myform.HospAdmTime.value;
        localStorage.setItem("HospAdmTime", value);

        value = document.myform.ICULOS.value;
        localStorage.setItem("ICULOS", value);

        window.open("response.html");

    }
</script>

</head>

<body class="bg-dark mystyle coolstyle">

    <!-- this is just jumbotrone -->
    <div class="jumbotron jumbotron-fluid mb-0 shadow" id="banner">
        <div class="container" id="banner-text">
            <h1 class="ml-5">Sepsis Disease Prediction</h1>
            <p class=" text-s ml-5">We are glad that you came here</p>
        </div>
    </div>

    <div id="filter">

        <div class="container col-md-9 bg-white pb-3 col-sm-11 rounded shadow mclass">
            <div class="pl-5 pt-5">
                You have to input the data of the patient in the following form. You can leave some fields of the form as blank if you don't have the value.
                <br>
                <b>Please Note : The accuracy of the prediction will decrease if you don't provide enough information.</b>
            </div>

            <form name="myform" class="pl-4">
                <div class="border border-white">
                    <hr>
                    <h2>VITAL SIGNS</h2>
                    <hr>
                    <div class="row col-md-12 col-sm-12">
                        <div class="form-group row col-md-6 col-sm-12">
                            <label for="email-id" class="col-md-8">Heart rate (beats per minute):</label>
                            <div class="col md-4">
                                <input type="text" value="89" class="form-control" name="HR" id="HR">
                            </div>
                        </div>

                        <div class="form-group row col-md-6 col-sm-12">
                            <label for="O2Sat" class="col-md-8">Pulse oximetry (%):</label>
                            <div class="col md-4">
                                <input type="text" value="100" class="form-control" name="O2Sat" id="O2Sat">
                            </div>
                        </div>

                        <div class="form-group row col-md-6 col-sm-12">
                            <label for="Temp" class="col-md-8">Temprature (Deg C):</label>
                            <div class="col md-4">
                                <input type="text" value="0" class="form-control" name="Temp" id="Temp">
                            </div>
                        </div>

                        <div class="form-group row col-md-6 col-sm-12">
                            <label for="SBP" class="col-md-8">Systolic BP (mm Hg):</label>
                            <div class="col md-4">
                                <input type="text" value="113" class="form-control" name="SBP" id="SBP">
                            </div>
                        </div>

                        <div class="form-group row col-md-6 col-sm-12">
                            <label for="MAP" class="col-md-8">Mean arterial pressure (mm Hg):</label>
                            <div class="col md-4">
                                <input type="text" value="82" class="form-control" name="MAP" id="MAP">
                            </div>
                        </div>

                        <div class="form-group row col-md-6 col-sm-12">
                            <label for="DBP" class="col-md-8">Diastolic BP (mm Hg):</label>
                            <div class="col md-4">
                                <input type="text" value="71" class="form-control" name="DBP" id="DBP">
                            </div>
                        </div>

                        <div class="form-group row col-md-6 col-sm-12">
                            <label for="Resp" class="col-md-8">Respiration Rate (breaths per minute):</label>
                            <div class="col md-4">
                                <input type="text" value="12" class="form-control" name="Resp" id="Resp">
                            </div>
                        </div>

                        <div class="form-group row col-md-6 col-sm-12">
                            <label for="EtCO2" class="col-md-8">End tidal CO2 (mm Hg):</label>
                            <div class="col md-4">
                                <input type="text" value="0" class="form-control" name="EtCO2" id="EtCO2">
                            </div>
                        </div>
                    </div>

                </div>
                <br>


                <!--LABORATORY VALUES-->
                <div>
                    <hr>
                    <h2>LABORATORY &nbsp;VALUES</h2>
                    <hr>

                    <div class="row col-md-12 col-sm-12">
                        <div class="form-group row col-md-6 col-sm-12">
                            <label for="BaseExcess" class="col-md-8">Measure of excess bicarbonate (mmol/L):</label>
                            <div class="col-md-4">
                                <input type="text" value="0" class="form-control" name="BaseExcess" id="BaseExcess">
                            </div>
                        </div>

                        <div class="form-group row col-md-6 col-sm-12">
                            <label for="HCO3" class="col-md-8">Bicarbonate (mmol/L):</label>
                            <div class="col-md-4">
                                <input type="text" value="0" class="form-control" name="HCO3" id="HCO3">
                            </div>
                        </div>
                    </div>

                    <div class="row col-md-12 col-sm-12">
                        <div class="form-group row col-md-6 col-sm-12">
                            <label for="FiO2" class="col-md-8">Fraction of inspired oxygen (%):</label>
                            <div class="col-md-4">
                                <input type="text" value="0" class="form-control" name="FiO2" id="FiO2">
                            </div>
                        </div>

                        <div class="form-group row col-md-6 col-sm-12">
                            <label for="pH" class="col-md-8">pH:</label>
                            <div class="col-md-4">
                                <input type="text" value="0" class="form-control" name="pH" id="pH">
                            </div>
                        </div>
                    </div>

                    <div class="row col-md-12 col-sm-12">
                        <div class="form-group row col-md-6 col-sm-12">
                            <label for="PaCO2" class="col-md-8">Partial pressure of CO2 from arterial blood (mm Hg):</label>
                            <div class="col-md-4">
                                <input type="text" value="0" class="form-control" name="PaCO2" id="PaCO2">
                            </div>
                        </div>

                        <div class="form-group row col-md-6 col-sm-12">
                            <label for="SaO2" class="col-md-8">Oxygen saturation of arterial blood (%):</label>
                            <div class="col-md-4">
                                <input type="text" value="0" class="form-control" name="SaO2" id="SaO2">
                            </div>
                        </div>
                    </div>

                    <div class="row col-md-12 col-sm-12">
                        <div class="form-group row col-md-6 col-sm-12">
                            <label for="AST" class="col-md-8">Aspartate transaminase (%):</label>
                            <div class="col-md-4">
                                <input type="text" value="0" class="form-control" name="AST" id="AST">
                            </div>
                        </div>
                        <div class="form-group row col-md-6 col-sm-12">
                            <label for="BUN" class="col-md-8">Blood urea nitrogen (mg/dL):</label>
                            <div class="col-md-4">
                                <input type="text" value="0" class="form-control" name="BUN" id="BUN">
                            </div>
                        </div>
                    </div>

                    <div class="row col-md-12 col-sm-12">
                        <div class="form-group row col-md-6 col-sm-12">
                            <label for="Alkalinephos" class="col-md-8">Alkaline Phosphate (IU/L):</label>
                            <div class="col-md-4">
                                <input type="text" value="0" class="form-control" name="Alkalinephos" id="Alkalinephos">
                            </div>
                        </div>
                        <div class="form-group row col-md-6 col-sm-12">
                            <label for="Calcium" class="col-md-8">Calcium (mg/dL):</label>
                            <div class="col-md-4">
                                <input type="text" value="0" class="form-control" name="Calcium" id="Calcium">
                            </div>
                        </div>
                    </div>

                    <div class="row col-md-12 col-sm-12">
                        <div class="form-group row col-md-6 col-sm-12">
                            <label for="Chloride" class="col-md-8">Chloride (mmol/L):</label>
                            <div class="col-md-4">
                                <input type="text" value="0" class="form-control" name="Chloride" id="Chloride">
                            </div>
                        </div>
                        <div class="form-group row col-md-6 col-sm-12">
                            <label for="Creatinine" class="col-md-8">Creatinine (mg/dL):</label>
                            <div class="col-md-4">
                                <input type="text" value="0" class="form-control" name="Creatinine" id="Creatinine">
                            </div>
                        </div>
                    </div>

                    <div class="row col-md-12 col-sm-12">
                        <div class="form-group row col-md-6 col-sm-12">
                            <label for="Bilirubin_direct" class="col-md-8">Bilirubin direct (mg/dL):</label>
                            <div class="col-md-4">
                                <input type="text" value="0" class="form-control" name="Bilirubin_direct" id="Bilirubin_direct">
                            </div>
                        </div>
                        <div class="form-group row col-md-6 col-sm-12">
                            <label for="Glucose" class="col-md-8">Serum glocuse (mg/dL):</label>
                            <div class="col-md-4">
                                <input type="text" value="0" class="form-control" name="Glucose" id="Glucose">
                            </div>
                        </div>
                    </div>

                    <div class="row col-md-12 col-sm-12">

                        <div class="form-group row col-md-6 col-sm-12">
                            <label for="Lactate" class="col-md-8">Lactic acid (mg/dL):</label>
                            <div class="col-md-4">
                                <input type="text" value="0" class="form-control" name="Lactate" id="Lactate">
                            </div>
                        </div>

                        <div class="form-group row col-md-6 col-sm-12">
                            <label for="Magnesium" class="col-md-8">Magnesium (mmol/dL):</label>
                            <div class="col-md-4">
                                <input type="text" value="0" class="form-control" name="Magnesium" id="Magnesium">
                            </div>
                        </div>
                    </div>

                    <div class="row col-md-12 col-sm-12">
                        <div class="form-group row col-md-6 col-sm-12">
                            <label for="Phosphate" class="col-md-8">Phosphate (mg/dL):</label>
                            <div class="col-md-4">
                                <input type="text" value="0" class="form-control" name="Phosphate" id="Phosphate">
                            </div>
                        </div>

                        <div class="form-group row col-md-6 col-sm-12">
                            <label for="Potassium" class="col-md-8">Potassium (mmol/L):</label>
                            <div class="col-md-4">
                                <input type="text" value="0" class="form-control" name="Potassium" id="Potassium">
                            </div>
                        </div>
                    </div>

                    <div class="row col-md-12 col-sm-12">
                        <div class="form-group row col-md-6 col-sm-12">
                            <label for="BILIRUBIN" class="col-md-8">Total bilirubin (mg/dL):</label>
                            <div class="col-md-4">
                                <input type="text" value="0" class="form-control" name="BILIRUBIN" id="BILIRUBIN">
                            </div>
                        </div>

                        <div class="form-group row col-md-6 col-sm-12">
                            <label for="TROPONIN" class="col-md-8">Troponin I (ng/mL):</label>
                            <div class="col-md-4">
                                <input type="text" value="0" class="form-control" name="TROPONIN" id="TROPONIN">
                            </div>
                        </div>
                    </div>

                    <div class="row col-md-12 col-sm-12">
                        <div class="form-group row col-md-6 col-sm-12">
                            <label for="Hct" class="col-md-8">Hematocrit (%):</label>
                            <div class="col-md-4">
                                <input type="text" value="0" class="form-control" name="Hct" id="Hct">
                            </div>
                        </div>

                        <div class="form-group row col-md-6 col-sm-12">
                            <label for="Hb" class="col-md-8">Haemoglobin (g/dL):</label>
                            <div class="col-md-4">
                                <input type="text" value="0" class="form-control" name="Hb" id="Hb">
                            </div>
                        </div>
                    </div>

                    <div class="row col-md-12 col-sm-12">
                        <div class="form-group row col-md-6 col-sm-12">
                            <label for="PTT" class="col-md-8">Partial thromboplastin time (seconds):</label>
                            <div class="col-md-4">
                                <input type="text" value="0" class="form-control" name="PTT" id="PTT">
                            </div>
                        </div>

                        <div class="form-group row col-md-6 col-sm-12">
                            <label for="WBC" class="col-md-8">Leukocyte count (count*10<sup>3</sup>/&#181;L):</label>
                            <div class="col-md-4">
                                <input type="text" value="0" class="form-control" name="WBC" id="WBC">
                            </div>
                        </div>
                    </div>

                    <div class="row col-md-12 col-sm-12">
                        <div class="form-group row col-md-6 col-sm-12">
                            <label for="FIBRINOGEN" class="col-md-8">Fibrinogen (mg/dL):</label>
                            <div class="col-md-4">
                                <input type="text" value="0" class="form-control" name="FIBRINOGEN" id="FIBRINOGEN">
                            </div>
                        </div>

                        <div class="form-group row col-md-6 col-sm-12">
                            <label for="PLATELATE" class="col-md-8">Platelets (count*10<sup>3</sup>/&#181;L):</label>
                            <div class="col-md-4">
                                <input type="text" value="0" class="form-control" name="PLATELATE" id="PLATELATE">
                            </div>
                        </div>
                    </div>

                </div>

                <hr>
                <h2>Demographics</h2>
                <hr>
                
                <div class="row col-md-12 col-sm-12">
                    <div class="form-group row col-md-6 col-sm-12">
                        <label for="age" class="col-md-8">Age (in Years):</label>
                        <div class="col md-4">
                            <input type="text" value="45" class="form-control" name="age" id="age">
                        </div>
                    </div>

                    <div class="form-group row col-md-6 col-sm-12">
                        <label for="gender" class="col-md-8">Gender:</label>
                        <div class="col md-4">
                            <select class="form-control" name="gender" id="gender">
                                <option value="1">Male</option>
                                <option value="0">Female</option>
                            </select>
<!--                            <input type="text" value="1" class="form-control" name="gender" id="gender">-->
                        </div>
                    </div>
                </div>
                
                <div class="row col-md-12 col-sm-12">
                    <div class="form-group row col-md-6 col-sm-12">
                        <label for="Unit1" class="col-md-8">Administrative Identifier for ICU unit (MICU):</label>
                        <div class="col-md-4">
                            <input type="text" value="1" class="form-control" name="Unit1" id="Unit1">
                        </div>
                    </div>

                    <div class="form-group row col-md-6 col-sm-12">
                        <label for="Unit2" class="col-md-8">Administrative Identifier for ICU unit (SICU):</label>
                        <div class="col-md-4">
                            <input type="text" value="0" class="form-control" name="Unit2" id="Unit2">
                        </div>
                    </div>
                </div>

                <div class="row col-md-12 col-sm-12">
                    <div class="form-group row col-md-6 col-sm-12">
                        <label for="HospAdmTime" class="col-md-8">Hours between hospital admit and ICU admit:</label>
                        <div class="col-md-4">
                            <input type="text" value="-4.84" class="form-control" name="HospAdmTime" id="HospAdmTime">
                        </div>
                    </div>

                    <div class="form-group row col-md-6 col-sm-12">
                        <label for="ICULOS" class="col-md-8">ICU length-of-stay(hours):</label>
                        <div class="col-md-4">
                            <input type="text" value="10" class="form-control" name="ICULOS" id="ICULOS">
                        </div>
                    </div>
                </div>

                <div class="mt-4 mb-3">
                    <center>
                        <input type="submit" class="btn btn-dark btn-lg box-shadow--8dp px-5 btnclass" value="SUBMIT" onclick="WriteStorage();">
                    </center>
                </div>
            </form>
        </div>
    </div>
</body></html>
